import 'package:app/api/api.dart';
import 'package:app/constants/icon_font.dart';
import 'package:app/page/container/login/base_login_state.dart';
import 'package:app/page/container/login/login_view.dart';
import 'package:app/utils/event_bus_utils.dart';
import 'package:app/utils/http_util.dart';
import 'package:app/utils/md5_utils.dart';
import 'package:app/utils/overlay_utils.dart';
import 'package:app/utils/string_utils.dart';
import 'package:app/utils/toast_utils.dart';
import 'package:app/utils/user_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class DesktopLoginViewBuilder {
  final TabController _tabController;
  late LoginViewState _state;
  DesktopLoginViewBuilder(this._tabController);
  Widget build(BuildContext context, LoginViewState data) {
    _state = data;
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(color: Colors.blueGrey.shade50),
        ),
        Positioned(
            top: 12,
            left: 56,
            child: Image.asset(
              "assets/images/title_logo.png",
              width: 200,
            )),
        Align(
            alignment: Alignment.center,
            child: Container(
              alignment: Alignment.topCenter,
              padding: const EdgeInsets.fromLTRB(48, 188, 0, 0),
              width: 820,
              child: Stack(
                children: [
                  Positioned(
                      left: 0,
                      child: Image.network(
                        "http://qiniuyun.xiaotuzhi.top/sign_in_bg-bbc515a9c2e7734807ea281b9b2ab380.png",
                        width: 320,
                      )),
                  Positioned(
                      top: 460,
                      child: Row(
                        children: [
                          Container(
                            height: 48,
                            width: 98,
                            child: TextButton(
                                style: ButtonStyle(
                                    //设置背景颜色
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.redAccent),
                                    //设置边框
                                    shape: MaterialStateProperty.all(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(48)))),
                                onPressed: () {},
                                child: const Text("Android版",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 15))),
                          ),
                          Container(
                            height: 48,
                            width: 98,
                            margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                            child: TextButton(
                                style: ButtonStyle(
                                    //设置背景颜色
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.redAccent),
                                    //设置边框
                                    shape: MaterialStateProperty.all(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(48)))),
                                onPressed: () {},
                                child: const Text("电脑版",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 15))),
                          ),
                          Container(
                            height: 48,
                            width: 98,
                            margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                            child: TextButton(
                                style: ButtonStyle(
                                    //设置背景颜色
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.grey.shade700),
                                    //设置边框
                                    shape: MaterialStateProperty.all(
                                        RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(48)))),
                                onPressed: () {},
                                child: RichText(
                                  textAlign: TextAlign.center,
                                  text: const TextSpan(children: [
                                    TextSpan(
                                        text: "iPhone版\n",
                                        style: TextStyle(
                                            color: Colors.white, fontSize: 16)),
                                    TextSpan(
                                        text: "敬请期待",
                                        style: TextStyle(
                                            color: Colors.white, fontSize: 8)),
                                  ]),
                                )),
                          )
                        ],
                      )),
                  Positioned(
                      right: 0,
                      child: Container(
                        width: 400,
                        height: _state.currentPage == 0 ? 508 : 608,
                        child: Card(
                          elevation: 6,
                          child: Column(
                            children: [
                              Container(
                                width: 138,
                                padding: const EdgeInsets.fromLTRB(0, 24, 0, 0),
                                margin: const EdgeInsets.symmetric(
                                    vertical: 24, horizontal: 0),
                                child: TabBar(
                                    controller: _tabController,
                                    labelColor: Colors.redAccent,
                                    unselectedLabelColor: Colors.grey.shade400,
                                    indicatorColor: Colors.redAccent,
                                    labelStyle: const TextStyle(fontSize: 18),
                                    tabs: const [
                                      Tab(text: "登录"),
                                      Tab(text: "注册")
                                    ]),
                              ),
                              getTabPanl()
                            ],
                          ),
                        ),
                      ))
                ],
              ),
            )),
      ],
    );
  }

  Widget getTabPanl() {
    if (_state.currentPage == 1) {
      return Column(
        children: [
          Container(
            width: 300,
            decoration: const BoxDecoration(
                color: Color(0x4cc8c8c8),
                border: Border.symmetric(
                    vertical: BorderSide(color: Colors.grey, width: 1),
                    horizontal: BorderSide(color: Colors.grey, width: 1)),
                borderRadius: BorderRadius.all(Radius.circular(4))),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.person,
                        size: 22,
                      ),
                      Container(
                        height: 28,
                        margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                        width: 240,
                        child: TextField(
                          maxLines: 1,
                          onChanged: (value) {
                            _state.account = value;
                          },
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(16),
                          ],
                          decoration: const InputDecoration(
                              isCollapsed: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5),
                              hintText: "昵称",
                              border: InputBorder.none),
                        ),
                      )
                    ],
                  ),
                ),
                const Divider(
                  color: Colors.grey,
                  height: 1,
                ),
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.phone_android,
                        size: 22,
                      ),
                      Container(
                        height: 28,
                        margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                        width: 240,
                        child: TextField(
                          maxLines: 1,
                          onChanged: (value) {
                            _state.account = value;
                          },
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(60),
                            FilteringTextInputFormatter.allow(
                                RegExp('[a-zA-Z0-9@.]+'))
                          ],
                          decoration: const InputDecoration(
                              isCollapsed: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5),
                              hintText: "手机号或邮箱",
                              border: InputBorder.none),
                        ),
                      )
                    ],
                  ),
                ),
                const Divider(
                  color: Colors.grey,
                  height: 1,
                ),
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.lock,
                        size: 22,
                      ),
                      Container(
                        height: 28,
                        margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                        width: 240,
                        child: const TextField(
                          maxLines: 1,
                          obscureText: true,
                          decoration: InputDecoration(
                              isCollapsed: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5),
                              hintText: "密码",
                              border: InputBorder.none),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 24),
            width: 300,
            height: 48,
            child: TextButton(
              style: ButtonStyle(
                  //设置背景颜色
                  backgroundColor: MaterialStateProperty.all(Colors.grey),
                  //设置边框
                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(48)))),
              onPressed: () {
                notOpen();
              },
              child: const Text(
                "注册",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          Container(
            width: 300,
            alignment: Alignment.center,
            child: RichText(
                textAlign: TextAlign.center,
                text: const TextSpan(children: [
                  TextSpan(text: "点击 “注册” 即表示您同意并愿意遵守简书"),
                  TextSpan(text: "用户协议"),
                  TextSpan(text: "和"),
                  TextSpan(text: "隐私政策"),
                  TextSpan(text: "。")
                ])),
          ),
          getRightPanelBottomView("———————    社交帐号直接注册    ———————")
        ],
      );
    }
    return Column(
      children: [
        Container(
            width: 300,
            decoration: const BoxDecoration(
                color: Color(0x4cc8c8c8),
                border: Border.symmetric(
                    vertical: BorderSide(color: Colors.grey, width: 1),
                    horizontal: BorderSide(color: Colors.grey, width: 1)),
                borderRadius: BorderRadius.all(Radius.circular(4))),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.person,
                        size: 22,
                      ),
                      Container(
                        height: 28,
                        margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                        width: 240,
                        child: TextField(
                          maxLines: 1,
                          onChanged: (value) {
                            _state.account = value;
                          },
                          inputFormatters: [
                            LengthLimitingTextInputFormatter(60),
                            FilteringTextInputFormatter.allow(
                                RegExp('[a-zA-Z0-9@.]+'))
                          ],
                          decoration: const InputDecoration(
                              isCollapsed: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5),
                              hintText: "手机号或邮箱",
                              border: InputBorder.none),
                        ),
                      )
                    ],
                  ),
                ),
                const Divider(
                  color: Colors.grey,
                  height: 1,
                ),
                Padding(
                  padding: const EdgeInsets.all(12),
                  child: Row(
                    children: [
                      const Icon(
                        Icons.lock,
                        size: 22,
                      ),
                      Container(
                        height: 28,
                        margin: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                        width: 240,
                        child: TextField(
                          maxLines: 1,
                          onChanged: (value) {
                            _state.password = value;
                          },
                          obscureText: true,
                          decoration: const InputDecoration(
                              isCollapsed: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5),
                              hintText: "密码",
                              border: InputBorder.none),
                        ),
                      )
                    ],
                  ),
                )
              ],
            )),
        Container(
          margin: const EdgeInsets.all(24),
          width: 300,
          child: Row(
            children: [
              Checkbox(
                  value: _state.remeberPasswrod,
                  onChanged: onRemeberPasswordChange),
              const Text(
                "记住我",
                style: TextStyle(color: Colors.grey, fontSize: 13),
              ),
              const Expanded(flex: 1, child: SizedBox.shrink()),
              const Text(
                "登录时遇到问题?",
                style: TextStyle(color: Colors.grey, fontSize: 13),
              ),
            ],
          ),
        ),
        SizedBox(
          width: 300,
          height: 48,
          child: TextButton(
            style: ButtonStyle(
                //设置背景颜色
                backgroundColor: MaterialStateProperty.all(Colors.redAccent),
                //设置边框
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(48)))),
            onPressed: () {
              doLogin();
            },
            child: const Text(
              "登录",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        getRightPanelBottomView("———————    社交帐号登录    ———————"),
      ],
    );
  }

  void onRemeberPasswordChange(bool? value) {
    _state.isRemeberPasswrod = value ?? false;
    _state.setState(() {});
  }

  void doLogin() {
    if (GStringUtils.isEmpty(_state.account) ||
        GStringUtils.isEmpty(_state.password)) {
      GTSUtils.showToast("账户和密码不能为空", context: _state.context);
      return;
    }
    GOverlayUtils.showLoading(_state.context);
    HttpUtil()
        .post(Apis.login,
            params: {
              "account": _state.account,
              "password": GMD5.getMD5(_state.password!)
            },
            formData: true,
            decryptedResult: true,
            security: false)
        .then((value) {
      if (value.success) {
        UserStates().login(value.data);
        GEventBusUtils().getDefault().fire(UserStates().getLoginUserInfo());
        Navigator.of(_state.context).pop();
      }
    });
  }

  void notOpen() {
    GTSUtils.showToast("尚未开放", context: _state.context);
  }

  Widget getRightPanelBottomView(String title) {
    return Container(
      width: 300,
      margin: const EdgeInsets.symmetric(vertical: 24),
      child: Column(
        children: [
          Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 28),
              child: Text(
                title,
                style: const TextStyle(color: Colors.grey),
              )),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              TextButton(
                  onPressed: () {
                    notOpen();
                  },
                  child: const Icon(
                    YunIconFont.weibo,
                    color: Colors.red,
                    size: 36,
                  )),
              TextButton(
                  onPressed: () {
                    notOpen();
                  },
                  child: const Icon(
                    YunIconFont.wetchat,
                    color: Colors.green,
                    size: 36,
                  )),
              TextButton(
                  onPressed: () {
                    notOpen();
                  },
                  child: const Icon(
                    YunIconFont.qq,
                    color: Color(0xff337ab7),
                    size: 36,
                  )),
              TextButton(
                  onPressed: () {
                    notOpen();
                  },
                  child: const Icon(
                    YunIconFont.alipay,
                    color: Color(0xff337ab7),
                    size: 36,
                  ))
            ],
          )
        ],
      ),
    );
  }
}

class PhoneAndEmailFormatter extends TextInputFormatter {
  String regexEmail =
      "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}\$";

  String number = "^[0-9]+";
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (RegExp(regexEmail).hasMatch(newValue.text)) {
      return newValue;
    }
    if (RegExp(number).hasMatch(newValue.text)) {
      return newValue;
    }
    return oldValue;
  }
}
/* Align(
        alignment: Alignment.center,
        child: Container(
          child: ,
        ),
      ) */
